<template>
        <div class="message-list">
            <div class="condition">
                <el-input v-model="message.userName" placeholder="留言用户" class="condition-input"></el-input>
                <el-tooltip content="按条件查询"><el-button type="primary" class="sub-query" @click="queryCondition(false)">查询</el-button></el-tooltip>
                <el-tooltip content="清空条件"><el-button type="default" class="sub-query" @click="clearCondition">清空</el-button></el-tooltip>
                <!--<el-tooltip content="新增数据"><el-button type="primary" @click="openAddBox"><i class="el-icon-plus"></i>新增</el-button></el-tooltip>-->
            </div>

            <el-table v-loading="loading" :data="listData" stripe border style="width: 98%;margin-left: 1%;margin-top: 15px"  :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column type="index" :index="indexMethod"> </el-table-column>
                <el-table-column prop="userName" label="留言用户" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="userPhone" label="手机号" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="userEmail" label="用户邮箱" width="230" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="messageContent" label="留言内容" width="800" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="status" label="状态" width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status=='1'" style="color: green">正常</span>
                        <span v-if="scope.row.status=='2'" style="color: red">停用</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width=180 style="text-align: center">
                    <template slot-scope="scope">
                        <el-tooltip content="查看"><el-button circle size="mini" type="primary" plain @click="openUpdateBox(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button></el-tooltip>
                        <!--<el-tooltip content="启用" v-if="scope.row.status=='2'"><el-button circle size="mini" type="primary" plain @click="openTips(scope.$index,scope.row.id,1)"><i class="el-icon-circle-check"></i></el-button></el-tooltip>-->
                        <!--<el-tooltip content="停用" v-if="scope.row.status=='1'"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,2)"><i class="el-icon-circle-close"></i></el-button></el-tooltip>-->
                        <el-tooltip content="删除"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,3)"><i class="el-icon-delete"></i></el-button></el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="操作提示" :visible.sync="updateStatus.tipsBox" width="30%">
                <span v-if="updateStatus.status == '1'">是否确认启用此条数据？</span>
                <span v-if="updateStatus.status == '2'">是否确认停用此条数据？</span>
                <span v-if="updateStatus.status == '3'">是否确认删除此条数据？</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="updateStatus.tipsBox=false">取 消</el-button>
                <el-button type="primary"  @click="saveStatus()">确 定</el-button>
            </span>
            </el-dialog>

            <el-dialog title="编辑数据" :visible.sync="editItemData.editDataBox" width="70%" v-if="editItemData.editDataBox"><!--关闭窗口时v-if及时销毁组件-->
                <message-form :editItemData="editItemData.rowData"  @editDataBoxClose="editItemData.editDataBox = false"/>
            </el-dialog>


            <div class="block">
                <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange"
                               :current-page="this.message.pageNo"
                               :page-sizes="[10, 20, 40, 60]"
                               :page-size="this.message.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="this.message.total">
                </el-pagination>
            </div>


        </div>
    </template>

    <script>
        import messageApi from '@/api/message/messageApi'
        import messageForm from "./MessageForm";
        export default {
            name: "MessageList",
            components:{
                messageForm
            },
            data(){
                return{
                    loading:true,  //请求加载
                    messageExperience:[{value:'1',label:'在校/实习生'},{value:'2',label:'1年经验'},{value:'3',label:'1-3年经验'},{value:'4',label:'3-5年经验'},{value:'5',label:'5年经验以上'}],
                    updateStatus:{  //修改状态
                        tipsBox:false,
                        index:'',
                        id:'',
                        status:'',
                    },
                    editItemData:{ // 添加或编辑
                        index:'',
                        rowData:'',
                        editDataBox:false,
                    },
                    listData:[],  //表格数据
                    message:{   //查询条件
                        id:'',
                        userName:'',
                        status: '',
                        pageNo:1,
                        pageSize:10,
                        total:0,
                    },
                }
            },
            methods:{
                indexMethod(i){
                    return i+1
                },
                headClass () {
                    return 'text-align: center;background:#eef1f6;'
                },
                rowClass () {
                    return 'text-align: center;'
                },
                async pageSizeChange(val){
                    this.message.pageSize = val
                    this.queryCondition(true);
                },
                async pageNoChange(val){
                    this.message.pageNo = val
                    this.queryCondition(true);
                },
                async queryCondition(isPage){
                    if (!isPage){
                        this.message.pageNo=1
                    }
                    this.loading = true
                    const res = await messageApi.getList(this.message)
                    if (res.code == '200'){
                        this.message.total = res.data.total
                        this.listData = res.data.records
                        this.loading = false;
                    }else{
                        this.$message.error(res.msg)
                    }
                },
                openTips(index,id,status){
                    this.updateStatus.index = index
                    this.updateStatus.id = id
                    this.updateStatus.status = status
                    this.updateStatus.tipsBox = true
                },
                openUpdateBox(index,row){
                    this.editItemData.index = index
                    this.editItemData.rowData = row
                    this.editItemData.editDataBox = true
                },
                openAddBox(){
                    this.editItemData.index = ''
                    this.editItemData.rowData = ''
                    this.editItemData.editDataBox = true
                },
                async saveStatus(){
                    this.updateStatus.tipsBox=false
                    const res = await messageApi.saveStatus(this.updateStatus.id,this.updateStatus.status)
                    if (res.code == '200'){
                        this.$message.success("操作成功")
                        if (this.updateStatus.status == '1'){
                            this.listData[this.updateStatus.index].status = 1
                        }
                        if (this.updateStatus.status == '2'){
                            this.listData[this.updateStatus.index].status = 2
                        }
                        if (this.updateStatus.status == '3'){
                            this.listData.splice(this.updateStatus.index,1)
                        }
                    }
                },
                clearCondition(){
                    this.message.userName='';
                }
            },
            created:async function (){
                const res = await messageApi.getList(this.message)
                if (res.code == '200'){
                    this.message.total = res.data.total
                    this.listData = res.data.records
                    this.loading = false;
                }else{
                    this.$message.error(res.msg)
                }
            }
        }
    </script>





<style scoped>

</style>